<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
    <script>
      (function (root, factory) {
        if (typeof define === "function" && define.amd) {
          // AMD. Register as an anonymous module.
          define(["exports", "echarts"], factory);
        } else if (
          typeof exports === "object" &&
          typeof exports.nodeName !== "string"
        ) {
          // CommonJS
          factory(exports, require("echarts"));
        } else {
          // Browser globals
          factory({}, root.echarts);
        }
      })(this, function (exports, echarts) {
        var log = function (msg) {
          if (typeof console !== "undefined") {
            console && console.error && console.error(msg);
          }
        };
        if (!echarts) {
          log("ECharts is not Loaded");
          return;
        }
        var colorPalette = [
          "#d87c7c",
          "#919e8b",
          "#d7ab82",
          "#6e7074",
          "#61a0a8",
          "#efa18d",
          "#787464",
          "#cc7e63",
          "#724e58",
          "#4b565b",
        ];
        echarts.registerTheme("vintage", {
          color: colorPalette,
          backgroundColor: "#fef8ef",
          graph: {
            color: colorPalette,
          },
        });
      });
    </script>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      const chartDom = document.getElementById("chart");
      const chart = echarts.init(chartDom, "vintage", { render: "svg" });
      chart.setOption({
        title: {
          text: "快速入门Echarts开发",
        },
        xAxis: {
          data: ["食品", "数码", "服饰", "箱包"],
        },
        yAxis: {},
        series: {
          type: "bar",
          data: [100, 120, 90, 150],
        },
      });
    </script>
  </body>
</html>
